<template>
  <div class="user-detail">
    <el-card class="user-info-card">
      <template #header>
        <div class="card-header">
          <span>用户信息</span>
          <div class="header-actions">
            <el-button @click="goBack">返回</el-button>
            <el-button type="primary" @click="handleEdit">编辑</el-button>
          </div>
        </div>
      </template>
      
      <el-descriptions :column="2" border>
        <el-descriptions-item label="用户ID">{{ userDetails.id }}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{ userDetails.username }}</el-descriptions-item>
        <el-descriptions-item label="昵称">{{ userDetails.nickname }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ userDetails.phone }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ userDetails.email }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusTagType(userDetails.status)">
            {{ getStatusText(userDetails.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="注册时间">{{ userDetails.createdAt }}</el-descriptions-item>
        <el-descriptions-item label="最后登录">{{ userDetails.lastLoginAt }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    
    <el-card class="user-stats-card">
      <template #header>
        <div class="card-header">
          <span>用户统计</span>
        </div>
      </template>
      
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-label">占卜次数</div>
            <div class="stat-value">25</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-label">订单数量</div>
            <div class="stat-value">3</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-label">充值金额</div>
            <div class="stat-value">¥597.00</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-label">会员等级</div>
            <div class="stat-value">VIP</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    
    <el-tabs v-model="activeTab" class="user-tabs">
      <el-tab-pane label="占卜记录" name="divination">
        <el-table :data="divinationRecords" stripe style="width: 100%">
          <el-table-column prop="id" label="记录ID" />
          <el-table-column prop="question" label="问题" />
          <el-table-column prop="type" label="类型" />
          <el-table-column prop="hexagram" label="卦象" />
          <el-table-column prop="createdAt" label="时间" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click="viewRecordDetail(scope.row)">
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      
      <el-tab-pane label="订单记录" name="order">
        <el-table :data="orderRecords" stripe style="width: 100%">
          <el-table-column prop="id" label="订单号" />
          <el-table-column prop="amount" label="金额" />
          <el-table-column prop="status" label="状态" />
          <el-table-column prop="createdAt" label="时间" />
        </el-table>
      </el-tab-pane>
      
      <el-tab-pane label="充值记录" name="recharge">
        <el-table :data="rechargeRecords" stripe style="width: 100%">
          <el-table-column prop="id" label="充值ID" />
          <el-table-column prop="amount" label="金额" />
          <el-table-column prop="method" label="方式" />
          <el-table-column prop="status" label="状态" />
          <el-table-column prop="createdAt" label="时间" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 激活的标签页
const activeTab = ref('divination')

// 用户详情
const userDetails = reactive({
  id: 1,
  username: 'admin',
  nickname: '管理员',
  phone: '13800138000',
  email: 'admin@example.com',
  status: 'active',
  createdAt: '2023-01-01 12:00:00',
  lastLoginAt: '2023-01-10 14:30:00'
})

// 占卜记录
const divinationRecords = ref([
  {
    id: 'DIV001',
    question: '今天运势如何？',
    type: '时间起卦',
    hexagram: '乾为天',
    createdAt: '2023-01-10 10:00:00'
  },
  {
    id: 'DIV002',
    question: '工作发展怎么样？',
    type: '数字起卦',
    hexagram: '坤为地',
    createdAt: '2023-01-09 15:30:00'
  }
])

// 订单记录
const orderRecords = ref([
  {
    id: 'ORD001',
    amount: '¥199.00',
    status: '已完成',
    createdAt: '2023-01-05 14:00:00'
  },
  {
    id: 'ORD002',
    amount: '¥299.00',
    status: '已支付',
    createdAt: '2023-01-03 11:30:00'
  }
])

// 充值记录
const rechargeRecords = ref([
  {
    id: 'REC001',
    amount: '¥199.00',
    method: '支付宝',
    status: '成功',
    createdAt: '2023-01-05 14:05:00'
  },
  {
    id: 'REC002',
    amount: '¥299.00',
    method: '微信',
    status: '成功',
    createdAt: '2023-01-03 11:35:00'
  }
])

// 获取状态标签类型
const getStatusTagType = (status) => {
  switch (status) {
    case 'active':
      return 'success'
    case 'inactive':
      return 'warning'
    case 'banned':
      return 'danger'
    default:
      return 'info'
  }
}

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'active':
      return '启用'
    case 'inactive':
      return '禁用'
    case 'banned':
      return '封禁'
    default:
      return '未知'
  }
}

// 返回用户列表
const goBack = () => {
  router.push('/user/list')
}

// 编辑用户
const handleEdit = () => {
  // 跳转到编辑页面或打开编辑对话框
  console.log('编辑用户')
}

// 查看记录详情
const viewRecordDetail = (row) => {
  // 查看占卜记录详情
  console.log('查看记录详情', row)
}

// 组件挂载后获取用户详情
onMounted(() => {
  // 模拟根据路由参数获取用户详情
  console.log('用户ID:', route.params.id)
})
</script>

<style lang="scss" scoped>
.user-detail {
  .user-info-card {
    margin-bottom: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  
  .user-stats-card {
    margin-bottom: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .stat-item {
      text-align: center;
      padding: 20px 0;
      
      .stat-label {
        color: #909399;
        margin-bottom: 10px;
      }
      
      .stat-value {
        font-size: 24px;
        font-weight: bold;
      }
    }
  }
  
  .user-tabs {
    margin-top: 20px;
  }
}
</style>